<template>
  <div class="home">
    <el-container style="height: 500px; border: 1px solid #eee;height: 100vh;">
      <el-aside width="200px" style="height: 100vh;">
        <el-menu
                default-active="2"
                style="height: 100vh;"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>

        <el-main>


<!--          <el-button type="primary" style="margin-bottom: 5px">添加</el-button>-->
          <div>
            <el-button @click="deleteSelection" type="danger"  style="margin-bottom: 5px">删除</el-button>
            <el-button @click="" icon="el-icon-plus" @click="openWindow" >添加</el-button>
            <el-dialog  :visible.sync="windowVisible" append-to-body>
              <ActivityWindow v-if="windowVisible" ref="popWindow"></ActivityWindow>
              <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button @click="windowVisible = false">取消</el-button>
                </span>
            </el-dialog>
          </div>

          <el-table :data="tableData" @selection-change="handleSelectionChange" size="small">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="empno" label="编号" width="140">
            </el-table-column>
            <el-table-column prop="ename" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="job" label="岗位">
            </el-table-column>
            <el-table-column prop="mgr" label="上级领导">
            </el-table-column>
            <el-table-column prop="hiredate" label="入职日期">
            </el-table-column>
            <el-table-column prop="sal" label="工资">
            </el-table-column>
            <el-table-column prop="comm" label="奖金">
            </el-table-column>
            <el-table-column prop="deptno" label="部门">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
              <template slot-scope="scope">
                <el-button  @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit" size="mini">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!--分页组件-->
          <div>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>




</template>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
  let ename=document.querySelector('[name="ename"]')
  let job=document.querySelector('[name="job"]')
  let mgr=document.querySelector('[name="mgr"]')
  let hiredate=document.querySelector('[name="hiredate"]')
  import ActivityWindow from "./ActivityWindow";
  export default {
    name:"HomeView",
    data() {
      return {
        windowVisible: false,
        tableData: [],//表格数据
        currentPage: 1,//当前页
        pageSize:10,//每页显示多少条
        total:0,//总记录数
        multipleSelection: [],//批量删除选中的
        search: "",
      }
    },
    computed: {
      tables() {
        const search = this.search;
        if (search) {
          return this.tableData.filter((dataNews) => {
            return Object.keys(dataNews).some((key) => {
              return String(dataNews[key]).toLowerCase().indexOf(search) > -1;
            });
          });
        }
        return this.tableData;
      },
    },
    mounted() {
      this.loadAll()
    },
    components: {
      ActivityWindow
    },
    created(){
      //调用查询方法
      // this.findAll();
      //调用分页查询
      this.findPage();
    },
    methods: {
      // findAll(){
      //     //异步请求后台接口
      //     this.request.get('emp/').then(resp => {
      //         console.log(resp);
      //         //把响应数据填充到属性中
      //         this.tableData = resp.data;
      //     });
      // },
      openWindow(){
        this.windowVisible = true;
        this.addOperate = true;
      },
      handleEdit(index, row) {
        this.windowVisible = true;
        this.addOperate = false;
        this.$nextTick(()=>{
          this.$refs.popWindow.dataInit(row);
        });
      },

      findPage(){//分页查询
        // 异步请求后台接口
        this.request.get('emp/page',{
          params:{
            pageNum:this.currentPage,
            pageSize:this.pageSize
          }
        }).then(resp => {
          console.log(resp);
          //把响应数据填充到属性中
          this.tableData = resp.data;
          //获取总记录数，设置到属性中
          this.total = resp.total;
        });
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      handleSizeChange(val) {//改变显示多少条
        console.log(`每页 ${val} 条`);
        //改变每页多少条的属性值
        this.pageSize = val;
        //刷新页面
        this.findPage();
      },
      handleCurrentChange(val) {//改变当前页
        console.log(`当前页: ${val}`);
        //改变当前页的属性值
        this.currentPage = val;
        //刷新页面
        this.findPage();
      },
      handleSelectionChange(val) {//批量选中
        this.multipleSelection = val;
        console.log(val);
      },
      deleteSelection(){//批量删除
        //创建一个存放编号的列表
        let ids = [];
        //遍历所有选择的对象列表
        this.multipleSelection.forEach(emp => {
          ids.push(emp.empno);
        });
        //判断是否选择了
        if(this.multipleSelection.length>0){
          //确认框
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //向服务器发送删除的异步请求
            this.request.delete("/emp/"+ids.join()).then(resp => {
              if(resp.code == 20021){
                //删除成功
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                //刷新页面
                this.findPage();
              }else{
                //删除失败
                this.$message.error('删除失败！');
              }
            });

          })
        }
      },
      data() {
        return {
          ruleForm: {
            ename: '',  //对应上边的姓名
            job: "",  //对应上边的密码
            mgr: '',  //对应上边的姓名
            hiredate: ""  //对应上边的密码
          }
        }
      },
      /*
      * 增加修改
      * */
      onSubmit() {
        //需要提交的form表单
        var form = this.$refs.popWindow.form;
        if (this.addOperate) {
          axios.get("http://localhost:93/emp/insert", {
            params: {
              "empno":this.empno,
              "enmae":this.ename,
              "jov":this.job,
              "msg":this.msg,
              "hirdate":this.hirdate,
              "sal":this.sal,
              "comm":this.comm,
              "deptno":this.deptno
            }
          })
                  .then(({params}) => {
                    console.log(params);
                  })
                  .catch((error) => {
                    console.log(error);
                  })
        } else {
          //axious 编辑修改


        }
      },


    }
  };
</script>